<template>
  <div>
    <section class="banner-main">
      <p class="p1">基于阿里AI构建的果品识别系统</p>
      <p class="p2">批量处理图像，即刻得到结果</p>
    </section>
    <section class="banner">
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="handleSuccess"
        :data="userData"
        multiple="true"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
      </el-upload>
    </section>
    <main>
      <div
        class="com_chart"
        id="ref_hot"
        style="height: 500px; width: 100%; margin: 50px auto"
      ></div>
      <section class="show-tab-main">
        <section class="clear"></section>
        <section class="more"><a href="#">查看更多</a></section>
      </section>
      <!--/show-->

      <section class="about">
        <section class="about-main">
          <p>AI果品识别是基于阿里AI构建果品识别系统。</p>
          从2012年开始，深度学习席卷了图像识别领域，在图像分类、目标检测、语义分割等领域秒杀了传统的方法，AI果品分析也在这次浪潮之中。
          <p></p>
        </section>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: "Multiple",
  data() {
    return {
      fileList: [],
      fileLists: [],
      uploadUrl: "http://101.200.181.33:8989/api/record/file",
      userData: {
        userId: window.sessionStorage.getItem("user"),
      },
      echartInstance: null,
      allData: null,
      titleSize: 0,
      // 当前展示第一分类
      courrentIndex: 0,

      charData: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 监听图片上传成功
    handleSuccess(response) {
      console.log(response);
      if (response.code === 200) {
        this.fileLists.push(response);
        this.getData();
        this.$notify({
          title: "识别完成",
          message: "这是" + response.data.name,
          duration: 10000,
          type: "success",
        });
      } else {
        this.getData();
        this.$notify({
          title: "识别失败",
          message: response.message,
          duration: 5000,
          type: "error",
        });
      }
    },

    handleError(err) {
      console.log(err);
      this.$notify({
        title: "识别失败",
        message: err.message,
        duration: 5000,
        type: "error",
      });
    },
    async initChart() {
      this.echartInstance = this.$echarts.init(
        document.getElementById("ref_hot")
      );

      const initOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 5, name: "苹果" },
              { value: 5, name: "香蕉" },
            ],
          },
        ],
      };

      this.echartInstance.setOption(initOption);
    },
    async getData() {
      // const { data: res } = await this.$http.get(`/api/record/top-search`);
      // console.log(this.fileList);
      this.allData = this.fileLists;

      this.charData = this.allData.map((i) => {
        return {
          name: i.data.name,
          url: i.data.url,
          value: this.getNameNum(i.data.name),
          err: i.code == 200 ? true : false,
        };
      });
      this.upData();
    },
    upData() {
      // 处理数据
      const dataOption = {
        series: [
          {
            data: this.charData,
          },
        ],
      };

      this.echartInstance.setOption(dataOption);
    },
    getNameNum(name) {
      let num = 0;
      this.charData.forEach((element) => {
        if (element.name === name) num++;
      });
      return ++num;
    },
  },
  mounted() {
    this.initChart();
    // this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
};
</script>

<style src="../../assets/css/base.css" scoped></style>
<style scoped>
.upload-demo {
  text-align: center;
  height: 400px;
  overflow-y: auto;
}
.el-upload__tip {
  color: #fff;
}
.el-upload-list {
  padding-left: 20px;
  padding-right: 20px;
}
.el-upload-list li {
  margin-bottom: 40px;
}
.el-upload--picture-card {
  background-color: #a4dc88;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /* background-color: #f5f5f5; */
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}
</style>
